<template>
  <el-dialog v-loading="loading" v-model="dialogVisible" title="查看子节点" width="800">
    <div class="result">
      <el-table :data="tableData" border style="width: 100%" max-height="600">
        <el-table-column type="index" width="50" />
        <el-table-column prop="locationName" label="子节点">
          <template #default="scope">
          <span
              v-if="!isEditingLocation"
              @dblclick="startEditing(scope.row, 'locationName')"
          >
            {{ scope.row.locationName }}
          </span>
            <el-input
                v-else
                v-model="scope.row.locationName"
                size="small"
                @blur="stopEditing(scope.row, 'locationName')"
            />
          </template>
        </el-table-column>
        <el-table-column prop="operator" label="操作" width="200">
          <template #default="scope">
            <el-tooltip content="双击子节点可修改内容" placement="top">
              <el-button
                  size="small"
                  type="primary"
                  @click="onSaveOrUpdate(scope.row)"
              >
                保存
              </el-button>
            </el-tooltip>
            <el-button
                size="small"
                type="primary"
                @click="onDelete(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="center-aligned-button">
      <el-button type="primary" @click="onAddSub">新增</el-button>
      <el-button type="primary" @click="onRefresh">刷新</el-button>
      <el-button @click="onCancel">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import { defineProps, defineEmits, reactive, ref, computed, watch } from "vue";
import {
  selectSubLocations, deleteLocation, createLocation, updateLocation,
} from "@/network/api";
const onSearch = () => {
  requestData();
};
const requestData = () => {
  loading.value = true;
  selectSubLocations({
    parentId: props.param.id.toString(),
  }).then((res) => {
        if (res?.data) {
          tableData.value = res.data || [];
        } else {
          tableData.value = [];
        }
      })
      .finally(() => {
        loading.value = false;
      });
};
const tableData = ref([]);
const onRefresh = () => {
  onSearch();
};

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  param: {
    type: Object,
    default: null,
  },
});
const loading = ref(false);
const isEditingLocation = ref(false);

const emits = defineEmits(["update:show", "refresh"]);
const dialogVisible = computed({
  get() {
    return props.show;
  },
  set(val) {
    emits("update:show", val);
  },
});
const onDelete = (row) => {
  if(!row.id) {
    tableData.value.shift();
    return;
  }
  deleteLocation({
    locationId: row.id.toString(),
  }).then((res) => {
    if (res?.code === 200) {
      // 删除成功
      ElMessage({
        message: "delete success",
        type: "success",
      });
      onSearch();
    } else {
      // 删除失败
      ElMessage({
        message: "delete failed",
        type: "error",
      });
    }
  });
};
const onAddSub = () => {
  tableData.value.unshift({
    locationName:"双击修改内容"
  });
};
const onSaveOrUpdate = (row) => {
  if(row.id) {
    updateLocation({
      id: row.id.toString(),
      locationName: row.locationName,
      parentId: props.param.id.toString(),
    }).then((res) => {
      onSearch();
    });
  }else{
    createLocation({
      locationName: row.locationName,
      parentId: props.param.id.toString(),
    }).then((res) => {
      onSearch();
    });
  }
}
watch(dialogVisible, (value) => {
  onSearch();
});
const onCancel = () => {
  emits("update:show", false);
};
const startEditing = (row, fieldName) => {
  isEditingLocation.value = true;
}
const stopEditing = (row, fieldName) => {
  // 停止编辑当前字段
  isEditingLocation.value = false;
};
</script>
<style lang="scss" scoped>
.btn_group {
  text-align: center;
}
.center-aligned-button{
  display:flex;
  justify-content: center;
  align-items: center;
}
</style>
